<template>
  <view class="my-badge">
    <view class="top-area" :style="{ paddingTop, height: btnHeight }">
      <up-icon name="arrow-left" size="28" @tap="handleGoBackRoute" />
      <view class="badge-type">
        <text
          :class="['badge', badge.isActive ? 'badge-isActive' : '']"
          v-for="badge in badgeType"
          :key="badge.name"
          @tap="handleTabsClick(badge)"
        >
          {{ badge.name }}
        </text>
      </view>
      <view style="flex: 1" />
      <!-- 占位标签 -->
    </view>
    <view class="container">
      <up-tabs
        :list="badgeTypeTabs"
        :current="curBadgeTypeTabsIdx"
        :line-width="rpx2px(72)"
        :line-height="rpx2px(20)"
        :itemStyle="badgeTypeTabStyle"
        key-name="badgeTypeName"
        @change="handleBadgeTypeTabsChange"
        :activeStyle="{
          color: '#303133',
          fontWeight: 'bold',
          transform: 'scale(1.05)',
        }"
      />
      <view class="badge-list" v-if="badgeList.length > 0">
        <view class="badge-item" v-for="item in badgeList" :key="item.id">
          <view v-if="item.badgeTypeName == '成长徽章'" class="badge-imgbox">
            <img :src="item.badgeImageUrl" alt="" class="badge-img" />
          </view>
          <view class="badge-imgbox" v-else >
            <img
              v-if="item.isExist !== '0' && item.badgeTypeName !== '成长徽章'"
              :src="item.badgeImageUrl"
              alt=""
              class="badge-img"
            />
            <img v-else :src="item.notBadgeImageUrl" alt="" class="badge-img" />
          </view>
          <text class="badge-name">
            {{ item.badgeName }}
          </text>
          <text class="badge-date">
            {{ item.updateTime?.substring(0, 10) }}
          </text>
        </view>
      </view>
      <none-data v-else />
    </view>
  </view>
</template>
<script setup>
import { ref, computed } from "vue";
import { onShow } from "@dcloudio/uni-app";
import {
  getTitleViewHeight,
  px2Rpx,
  rpx2px,
  wxGetCapsuleSize,
} from "@/utils/utils";
import {
  getUserBadgeDetailApi,
  getEnterpriseBadgeDetailApi,
} from "@/api/user/badge";
import { getUserInfoApi } from "@/api/user/index";

const badgeType = ref([
  {
    name: "我的徽章",
    isActive: false,
  },
  {
    name: "企业徽章",
    isActive: false,
  },
]);

const badgeTypeTabs = ref([]);
const curBadgeTypeTabsIdx = ref(0);
const badgeTypeTabStyle = {
  flex: 1,
  fontFamily: "ali-p",
  fontSize: "31rpx",
  height: "80rpx!important",
};

const handleGoBackRoute = () => {
  uni.switchTab({
    url: "/pages/user/index",
  });
};

const handleTabsClick = (badge) => {
  const curActiveTab = badgeType.value.find((tab) => tab.isActive).name;
  if (badge.name === curActiveTab.name) return;
  badgeType.value.forEach((tab) => {
    tab.isActive = tab.name === badge.name;
  });
  switchBadgeTypeDetail(badge.name);
};

const switchBadgeTypeDetail = (badgeType) => {
  badgeTypeTabs.value = [];
  userBadgeList.value = [];
  console.log("curBadgeTypeTabsIdx", curBadgeTypeTabsIdx.value);
  switch (badgeType) {
    case "我的徽章":
      getUserBadgeDetail();
      break;
    case "企业徽章":
      getEnterpriseBadgeDetail();
      break;
  }
};

/**
 * 获取个人徽章详情
 * @returns {Promise<void>}
 */
const getUserBadgeDetail = async () => {
  const user = await getUserInfoApi();
  let userId = "";
  if (user.code == 200) {
    userId = user.data.id;
  }
  const res = await getUserBadgeDetailApi(userId);
  const { code, data } = res;
  if (code === 200) {
    badgeTypeTabs.value = data.badgeTypeList;
    userBadgeList.value = data.badgeDetailList;
    badgeList.value = userBadgeList.value.filter(
      (item) =>
        item.badgeTypeName ===
        badgeTypeTabs.value[curBadgeTypeTabsIdx.value].badgeTypeName
    );
  }
};

const getEnterpriseBadgeDetail = async () => {
  const res = await getEnterpriseBadgeDetailApi();
  const { code, data } = res;
  if (code === 200) {
    badgeTypeTabs.value = data.badgeTypeList;
    enterpriseBadgeList.value = data.badgeDetailList;
    badgeList.value = enterpriseBadgeList.value.filter(
      (item) =>
        item.badgeTypeName ===
        badgeTypeTabs.value[curBadgeTypeTabsIdx.value].badgeTypeName
    );
  }
};

const userBadgeList = ref([]);
const enterpriseBadgeList = ref([]);
const badgeList = ref([]);

const handleBadgeTypeTabsChange = (tab) => {
  curBadgeTypeTabsIdx.value = tab.index;
  const tabName = tab.badgeTypeName;
  const curActiveTabName = badgeType.value.find((item) => item.isActive).name;
  switch (curActiveTabName) {
    case "我的徽章":
      badgeList.value = userBadgeList.value.filter(
        (badge) => badge.badgeTypeName === tabName
      );
      break;
    case "企业徽章":
      badgeList.value = enterpriseBadgeList.value.filter(
        (badge) => badge.badgeTypeName === tabName
      );
      break;
  }
};

const paddingTop = ref("");
const btnHeight = ref("");
onShow(() => {
  badgeType.value[0].isActive = true;
  /* #ifdef MP-WEIXIN */
  btnHeight.value = px2Rpx(wxGetCapsuleSize()?.height + 4) + "rpx";
  paddingTop.value = getTitleViewHeight() + "rpx";
  /* #endif */
  switchBadgeTypeDetail(badgeType.value.find((item) => item.isActive).name);
});
</script>
<style scoped lang=less>
.my-badge {
  padding-top: 30rpx;
  .top-area {
    display: flex;
    align-items: center;
    justify-content: space-between;
    align-items: center;
    padding: 0 42rpx;
    // margin-top: 50rpx;
    :deep(.u-icon) {
      flex: 1;
    }

    .badge-type {
      flex: 2;
      display: flex;
      width: 359rpx;
      height: 52rpx;
      background-color: @color-light-grey;
      border-radius: 22rpx;
      padding: 8rpx;
      box-sizing: border-box;

      .badge {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: "ali-m";
        font-size: 32rpx;
        font-weight: 400;
        color: @color-black;
        text-align: center;
      }

      .badge-isActive {
        color: @color-origin-white;
        background-color: @color-blue;
        border-radius: 22rpx;
        transition: all 1s ease-out;
      }
    }
  }

  .container {
    margin-top: 45rpx;
    padding: 0 42rpx;
    min-height: 50vh;
    background-color: @color-origin-white;

    .badge-list {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      margin-top: 54rpx;
      padding-left: 54rpx;
      padding-right: 54rpx;

      .badge-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 162rpx;
        margin-bottom: 69rpx;
        font-family: "ali-p";
        .badge-imgbox {
          width: inherit;
          height: auto;
          .badge-img {
            width: inherit;
            height: 143rpx;
          }
        }

        .badge-name {
          width: inherit;
          font-size: 23rpx;
          color: @color-black-text;
          text-align: center;
          margin-top: 22rpx;
        }

        .badge-date {
          width: inherit;
          font-size: 20rpx;
          color: @color-grey-text;
          text-align: center;
          margin-top: 11rpx;
        }
      }
    }

    :deep(.u-tabs__wrapper__nav__item) {
      height: 40rpx;
    }

    :deep(.u-tabs__wrapper__nav__line) {
      height: 15rpx !important;
    }
  }
}
</style>
